"use client"

import { useState, useEffect } from "react"
import Image from "next/image"

export default function DesktopTaskbar() {
  const [currentTime, setCurrentTime] = useState("")

  useEffect(() => {
    // Update time every minute
    const updateTime = () => {
      const now = new Date()
      const hours = now.getHours()
      const minutes = now.getMinutes()
      const ampm = hours >= 12 ? "PM" : "AM"
      const formattedHours = hours % 12 || 12
      const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes
      setCurrentTime(`${formattedHours}:${formattedMinutes} ${ampm}`)
    }

    updateTime()
    const interval = setInterval(updateTime, 60000)

    return () => clearInterval(interval)
  }, [])

  return (
    <div className="fixed bottom-0 left-0 right-0 h-8 bg-[#c0c0c0] win95-border flex justify-between items-center px-1 z-50">
      <button className="win95-button bg-[#c0c0c0] h-6 px-2 flex items-center">
        <Image src="/images/pumproom-logo.png" width={16} height={16} alt="Pumproom Logo" className="w-4 h-4 mr-1" />
        <span className="font-bold text-sm">Start</span>
      </button>
      <div className="win95-inset bg-[#c0c0c0] h-6 px-2 flex items-center">
        <span className="text-sm">{currentTime}</span>
      </div>
    </div>
  )
}
